<template>
  <div class="mod-config">
    <el-card>
      <el-form :inline="true" :model="dataForm" size="mini">
        <el-form-item>
          <strong>项目启动时间:</strong>
          <el-date-picker v-model="dataForm.startDate" type="date" value-format="yyyy-MM-dd" placeholder="起始时间" class="date_type" @change="getDataList"></el-date-picker>至
          <el-date-picker v-model="dataForm.endDate" type="date" value-format="yyyy-MM-dd" placeholder="结束时间" class="date_type" @change="getDataList"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="搜索关键字" clearable @change="getDataList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList"  icon="el-icon-search">查询</el-button>
          <el-button type="success" @click="exportExcelHandle"  icon="el-icon-printer">导出Excel</el-button>
        </el-form-item>
      </el-form>
      <div id="chartId">
        <div class="chart_title">
          <div>满意度调查统计表</div>
          <div class="date_title">{{dateTitle}}</div>
        </div>
        <el-table :data="dataList" border v-loading="dataListLoading" stripe style="width: 100%;"
                  :header-cell-style="{background: 'steelblue',color:'white'}" >
          <el-table-column prop="projectNo" header-align="center" align="left" label="项目编号" width="129"></el-table-column>
          <el-table-column prop="projectName" header-align="center" align="left" label="项目名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="projectCharge" header-align="center" align="center" label="项目负责人" width="117" sortable></el-table-column>
          <el-table-column prop="projectStartDateTime" header-align="center" align="center" width="129" label="项目启动时间" sortable></el-table-column>
          <el-table-column prop="gradeQuality" header-align="center" align="center" label="成果质量" width="110"></el-table-column>
          <el-table-column prop="gradeRequire" header-align="center" align="center" label="要求程度" width="110"></el-table-column>
          <el-table-column prop="gradeAttitude" header-align="center" align="center" label="工作态度" width="110"></el-table-column>
          <el-table-column prop="gradeProgress" header-align="center" align="center" label="进度情况" width="110"></el-table-column>
          <el-table-column prop="gradeProficiency" header-align="center" align="center" label="熟练程度" width="110"></el-table-column>
          <el-table-column prop="sum" header-align="center" align="center" label="评分总分" width="108" sortable>
            <template slot-scope="scope">
              <span style="color:red;">{{getSumHandle(scope.row)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data () {
    return {
      dataForm: {
        startDate: '',
        endDate: '',
        key: '',
        sidx: 'id'
      },
      dataList: [],
      dateTitle: '', // 时间标题
      dataListLoading: false
    }
  },
  activated () {
    this.dataForm.startDate = moment(new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)).format('YYYY-MM-DD')
    this.getDataList()
  },
  methods: {
    getDataList () {
      this.dateTitle = (this.dataForm.startDate === null ? '' : this.dataForm.startDate) + '至' + (this.dataForm.endDate === '' ? '今' : this.dataForm.endDate)
      this.dataListLoading = true
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl('/project/chartsurvey/volist'),
          method: 'get',
          params: this.$http.adornParams({
            'sidx': this.dataForm.sidx,
            'startDate': this.dataForm.startDate,
            'endDate': this.dataForm.endDate,
            'key': this.dataForm.key
          })
        }).then(({data}) => {
          this.dataListLoading = false
          if (data && data.code === 0) {
            this.dataList = data.list
            resolve(data.list)
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    exportExcelHandle () {
      this.$http({
        url: this.$http.adornUrl('/project/chartsurvey/exportExcel'),
        method: 'get',
        params: this.$http.adornParams({
          'sidx': this.dataForm.sidx,
          'startDate': this.dataForm.startDate,
          'endDate': this.dataForm.endDate,
          'key': this.dataForm.key
        }),
        withCredentials: false, // 允许携带cookie
        responseType: 'blob'
      }).then(({data}) => {
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(data) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = '满意度统计表（' + this.dateTitle + '）.xls' // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
        this.dataListLoading = false
      })
    },
    getSumHandle (item) {
      return item.gradeAttitude +
              item.gradeProficiency +
              item.gradeProgress +
              item.gradeQuality +
              item.gradeRequire
    }
  }
}
</script>

<style scoped>
.date_type{
  max-width: 140px;
}
.chart_title{
  width: 100%;
  text-align: center;
  margin-top: 20px;
  font-size: 27px;
  font-weight: 700;
}
.chart_title .date_title{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
}
</style>
